<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas 画图</title>
    <style>
        body {
            text-align: center;
        }

        canvas {
            background: #ddd;
        }
    </style>
</head>
<body>
<canvas id="app" width="500" height="500"></canvas>
<script>
    // let app = document.getElementById("app");
    // 画笔 画圆形 0~360  ==  0~2PI
    // 公式： 90(角度)*Math.PI/180 = 弧度
    let ctx = app.getContext("2d");
    // 3. 开始新路径
    ctx.beginPath();
    // 4. 将画笔移动到指定点
    ctx.lineWidth = 15;
    ctx.strokeStyle = "#aaa";
    ctx.arc(250, 200, 100, 0, 2 * Math.PI); // 弧度
    // 5. 画直线
    // 6. 闭合
    // ctx.closePath();
    // 7. 描边
    ctx.stroke();

    // 绘制绿色进度条
    let start = -90; // 开始角度
    let end = -90; // 结束角度
    let timer = setInterval(function () {
        ctx.beginPath();
        ctx.arc(250, 200, 100, start * Math.PI / 180, end * Math.PI / 180);
        end += 5;
        ctx.strokeStyle = "green";
        ctx.stroke();
        // 停止定时器
        if (end >= 269) {
            clearInterval(timer);
        }
    }, 100)
</script>
</body>
</html>